<template>
    <div>
        <el-dialog
            :title="!form.id ? '新增' : '修改'"
            :visible.sync="visible"
            :close-on-click-modal="false">

            <div class="table_form_wrap">
                <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">
                    <el-form-item label="任务名称" prop="jobName">
                        <el-input placeholder="" v-model="form.jobName" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="Cron表达式" prop="jobCron">
                        <el-input placeholder="" v-model="form.jobCron" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="执行作业类" prop="jobClassPath">
                        <el-input placeholder="" v-model="form.jobClassPath" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="任务的参数" prop="jobParams">
                        <el-input placeholder="" v-model="form.jobParams" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="描述信息" prop="jobDesc">
                        <el-input placeholder="" v-model="form.jobDesc" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="jobStatus">
                        <el-select v-model="form.jobStatus" placeholder="请选择">
                            <el-option label="正常" value="RUNNING"></el-option>
                            <el-option label="暂停" value="PAUSE"></el-option>
                            <el-option label="完成" value="FINISHED"></el-option>
                            <el-option label="失败" value="FAILED"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>


            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button @click="handleSubmit()" type="primary" :submitLoading="submitLoading">提 交</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                submitLoading: false,

                form: {
                    jobName: '测试定时任务',
                    jobCron: '0/5 * * * * ? *',
                    jobClassPath: "com.quan.system.scheduler.TestSchedulerJob",
                    jobParams: "{'k1': 'val1', 'k2': 'val2'}",
                    jobStatus: 'RUNNING',
                    jobDesc: '定时描述'
                },
                rules: {
                    jobName: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
                    jobCron: [{required: true, message: '任务触发Cron表达式不能为空', trigger: 'blur'}],
                    jobClassPath: [{required: true, message: '任务执行作业类不能为空', trigger: 'blur'}],
                    jobParams: [{required: true, message: '任务的参数不能为空', trigger: 'blur'}],
                    jobStatus: [{required: true, message: '任务执行状态不能为空', trigger: 'blur'}],
                }
            }
        },

        methods: {
            init(id) {
                const refs = this.$refs
                // 情况表单数据
                this.form.id = id || null
                this.visible = true

                this.$nextTick(() => {
                    refs['form'].resetFields()
                    if (this.form.id) {
                        this.getInfo(this.form.id)
                    }
                })
            },

            /**
             * 详细信息
             */
            async getInfo(id) {
                if (id) {
                    const res = await this.$http({
                        url: '/system/scheduler/info/' + id,
                        method: 'GET'
                    })
                    this.form = Object.assign({}, res.data)
                }
            },

            /**
             * 提交表单
             */
             async handleSubmit() {
                const refs = this.$refs
                this.submitLoading = true
                const valid = await refs['form'].validate().catch(() => {})
                if (valid) {
                    const res = await this.$http({
                        url: `/system/scheduler/${!this.form.id ? 'save' : 'update'}`,
                        method: 'POST',
                        data: this.form
                    })
                    if (this.ResultMessage(res)) {
                        this.$emit('refreshDataList')
                        this.submitLoading = false
                        this.visible = false
                    } else {
                        this.submitLoading = false
                    }
                } else {
                    this.submitLoading = false
                }
            }

        }
    };
</script>

<style lang="scss" scoped></style>
